Establecí el tipo de entrada en "número" y ahora quiero aplicarle algunas validaciones. Quiero evitar que se inicie la función (después de hacer clic en el botón) si la entrada contiene "+", "-" o "e".
const countBtn = document.getElementById("forge-points-btn"); function quantityHandler() { let userInput = document.querySelector(".forge-points-input").value; if(userInput.split("").includes("e") || userInput.split("").includes("-")) { return; } // else code } <input type="number" class="forge-points-input" id="forge-points-input"></input> <button type="button" id="forge-points-btn">Count</button> Pero para mi sorpresa, no funciona porque cuando se ingresan menos, más o "e", por ejemplo, "321-51", "+e-", etc., la entrada de userInput es igual a una cadena vacía. Sin embargo, cuando se ingresa "-55", userInput muestra el valor correcto. ¿Por qué está pasando eso? Estoy tratando de averiguar por qué no puede funcionar esta solución. He visto otras soluciones en este foro, pero me gustaría entender por qué esta no puede funcionar.
La documentación de MDN establece:
Los elementos
<input type="number">invalidan automáticamente cualquier entrada que no sea un número (o esté vacía, a menos que se especifique lorequired).
Puede verlo usted mismo: proporcionar un valor que no sea un número invalida automáticamente el campo.
<p>Equations are not numbers.</p> <input type="text" id="text-input" value="123-456"> <input type="number" id="number-input" value="123-456"> <p>Signed numbers are numbers.</p> <input type="number" id="number-input" value="-123"> <input type="number" id="number-input" value="+123"> <p>Exponents are numbers.</p> <input type="number" id="exponent-input" value="10e5"> Si desea no permitir + , - y e en su input[type=number] , entonces su enfoque es correcto. Sin embargo, también debe verificar que la entrada sea válida.
if (!userInput?.length || userInput.includes("e") || ...) (Nota al margen, no necesita .split("") ya que JavaScript puede convertir un number en una string ).